/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-12 12:13:30
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-22 21:55:37
 * @FilePath: \project-my\next-learn-app\src\views\main.tsx
 * @Description: 
 */
'use client'
import React, { useState, useEffect } from 'react'
// import { GetStaticProps } from 'next'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Button from './tailwind/button'
import Swiched from './tailwind/checkOut'
import WaterFall from './tailwind/waterFall'
import TextHidden from './tailwind/textHidden'

// import HoverMenu from './tailwind/hoverMenu'


const Main = () => {

    const [checked, setChecked] = useState(true)
    const router = useRouter()

    useEffect(() => {

    }, [checked])

    const classNames = ['m-3', checked ? 'block' : 'hidden'].join(' ')
    const onchangChecked = () => {
        setChecked(!checked)
        console.log('%c [ checked ]-30', 'font-size:13px; background:pink; color:#bf2c9f;', checked)
    }
    return (

        <div className='grid place-content-center'>
            <p className='text-fuchsia-400 text-5xl'>main</p>
            <div className='m-3'>
                <Swiched checked={checked}
                    change={onchangChecked} />
            </div>
            <div className='m-3'>
                <Link href='/login' className='text-blue-400 w-5 h-5 '>link to page</Link>
                <div onClick={() => router.push('/login')}>function to page</div>
            </div>
            <div className='m-3' style={checked ? { display: 'block' } : { display: 'none' }}>
                <Button />
            </div>

            <div className='m-3'>
                <TextHidden />
            </div>
            {/* <HoverMenu /> */}
            <div className={classNames}>
                {12333333333333333333333333333}
                <WaterFall />
            </div>

        </div>

    )
}
// export const getStaticProps: GetStaticProps<Props> = async () => {
//     const images = await loadImages();
//     console.log('%c [ images ]-33', 'font-size:13px; background:pink; color:#bf2c9f;', images)
//     return {
//         props: {
//             images,
//         },
//     };
// };

export default Main
